import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
// 在进入页面时从本地获取数据赋值给vuex
//  || {} 是为了在新设备上没有locaStorage数据时 保证userInfo是依旧是一个对象
// console.log(JSON.parse(localStorage.getItem('userInfo')), 'test');
let userInfo = JSON.parse(localStorage.getItem('userInfo')) || {}

export default new Vuex.Store({
  // 类似组件中的data，用来初始化数据、保存数据🔴
  state: {
    // 用户信息
    // userInfo: {},

    // userInfo从locaStorage获取userInfo的数据
    userInfo: userInfo,
  },
  //  类似组件中的计算属性
  getters: {
    myMenus(state) {
      // 当前用户的菜单
      return state.userInfo.menus || []
    },
    username(state) {
      return state.userInfo.username || ''
    }
  },
  // 修改数据，类似组件中的methods，都是同步的🔴
  mutations: {
    // 1.保存用户信息
    // 1.2 第一个参数：原数据 第二个参数：新数据
    savaUserInfo(state, payload) {
      state.userInfo = payload;
      // console.log(state, payload);
      // store中的state只是临时变量，刷新后会清空，需要存储到本地中,转字符串
      localStorage.setItem('userInfo', JSON.stringify(payload))
    },

    // 2.退出时清除用户信息
    clearUserInfo(state) {
      state.userInfo = {}
      // 2.1 删除本地储存的userInfo信息
      localStorage.removeItem('userInfo')
    },
  },
  // 修改数据，类似组件中的methods，都是异步的
  actions: {
    // action  = axios + mutations
  },
  // 模块化 其中可以再包含上述核心，适用于特别法则的场景，根据业务拆分代码
  modules: {
  }
})
